import React from 'react'
import {NavLink} from 'react-router-dom'
import './style.css'

const navData = [
    {id: 'home', name: '首页', icon: '', path: '/home'},
    {id: 'shop', name: '逛逛', icon: '', path: '/shop'},
    {id: 'find', name: '发现', icon: '', path: '/find'},
    {id: 'cart', name: '购物车', icon: '', path: '/cart'},
    {id: 'my', name: '我的', icon: '', path: '/my'}
  ];

export default function Footer() {
    return (
        <nav className="tab-bar">
      
     {
       navData.map(item=>(
         <NavLink key={item.id} to={item.path} className="tab-item">
           <img src={`/images/${item.icon}.png`} alt=""/>
           <span>{item.name}</span>
         </NavLink>
       ))
     }
     
     </nav>
    )
}
